<template>
  <view class="main dispaly-just-between" :style="{ background: props.bgColor }">
    <view class="item" v-for="(item, index) in props.data" :key="index" @click="skipDetail(item, index)">
      <view class="cover">
        <view class="cover-bg">
          <image src="/static/image/pro-border.png" mode="aspectFill" />
        </view>
        <view class="pro-cover">
          <image v-if="item.images"
              :src="item.images.split(',')[0]"
            mode="aspectFill" />
        </view>
      </view>
      <view class="content">
        <view class="title over-2" >{{item.name}}</view>
        <view class="middle dispaly-just-between">
          <view class="price">{{Number(item.price).toFixed(2)}}</view>
          <view class="collect">
            <view class="collect-box dispaly-center">
              <view class="num">{{item.collectNum || 0}}</view>
              <view class="icon">
                <image src="/static/icon/harts.png" mode="aspectFill" />
              </view>
            </view>
          </view>
        </view>
        <view class="user dispaly-just-between">
          <view class="info dispaly-center">
            <view class="avatar ">
              <image
                  :src="item.avatar"
                mode="aspectFill" />
            </view>
            <view class="name">{{item.nickName}}</view>
          </view>
          <view class="user-id">ID{{item.id}}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>

const props = defineProps({
  listType: {
    type: String || Number,
    default: 1
  },
  bgColor: {
    type: String,
    default: '#ffd257'
  },
  data: Array
})

const skipDetail = (item, index) => {
  if (props.listType == 1) {
    uni.navigateTo({
      url: `/subPackage/index/productDetail?id=${item.id}`
    })
  } else {
    uni.navigateTo({
      url: `/subPackage/index/bookDetail?id=${item.id}`
    })
  }
}
</script>

<style lang="scss" scoped>
.main {
  background: #ffd257;
  flex-wrap: wrap;
  padding: 23rpx 30rpx;

  .item {
    padding-bottom: 40rpx;

    .cover {
      position: relative;

      .cover-bg {
        image {
          width: 318rpx;
          height: 424rpx;
        }
      }

      .pro-cover {
        position: absolute;
        top: 9rpx;
        left: 8rpx;
        right: 0;
        width: 310rpx;
        height: 407rpx;

        image {
          width: 302rpx;
          height: 407rpx;
          border-radius: 10rpx;
        }
      }
    }

    .content {
      width: 318rpx;
      max-width: 318rpx;

      .title {
        font-family: IPix;
        font-size: 26rpx;
        color: #000000;
        margin-top: 34rpx;
      }

      .middle {
        margin: 19rpx 0 32rpx 0;

        .price {
          font-family: IPix;
          font-size: 32rpx;
          color: #000000;
        }

        .collect {
          .collect-box {
            .num {
              font-family: IPix;
              font-size: 18rpx;
              color: #000000;
            }

            .icon {
              margin-left: 5rpx;
              padding-bottom: 3rpx;

              image {
                width: 24rpx;
                height: 20rpx;
              }
            }
          }
        }
      }

      .user {
        .info {
          .avatar {
            margin-right: 20rpx;
            border: 1rpx solid #FFFFFF;
            border-radius: 50%;
            width: 50rpx;
            height: 50rpx;

            image {
              width: 50rpx;
              height: 50rpx;
              border-radius: 50%;
            }
          }

          .name {
            font-family: IPix;
            font-size: 22rpx;
            color: #000000;
          }
        }

        .user-id {
          font-family: IPix;
          font-size: 22rpx;
          color: #000000;
        }
      }
    }
  }
}
</style>